{% extends 'layout.html' %}

{% load static %}

{% block content %}
    {% comment %}style{% endcomment %}
    <style>
        .country {
            padding-left: 30px;
            background-size: 20px 20px;
            background-repeat: no-repeat !important;
        }
    </style>

    {% comment %}path{% endcomment %}
    <ol class="breadcrumb">
        <li><a href="/#">Home</a></li>
        <li class="active">All Numbers</li>
    </ol>

    {% comment %}content{% endcomment %}
    <div class="loading row">
        <div class="col-md-4 col-md-offset-4">
            <img src="{% static 'img/loading.gif' %}" alt="loading" style="width: 100%;">
        </div>
    </div>
    <div class="empty" style="display: none;">
        <div class="col-md-4 col-md-offset-4">
            <img src="{% static 'img/empty.png' %}" alt="loading" style="width: 100%;">
        </div>
    </div>
    <div class="numbers" style="display: none;">
        <table class="table table-hover">
            <thead>
            <tr>
                <th>No</th>
                <th>Number</th>
                <th>Country</th>
                <th>Operation</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

    {% comment %}javascript{% endcomment %}
    <script>
        $(function () {
            $('.loading').show();
            let url = '/api/numbers/';
            let country = $.getUrlParam('country');
            if (country !== null) {
                url += country;
            }
            $.get(url, function (e) {
                $('.loading').hide();
                if (Array.isArray(e) === false) {
                    alert(e);
                    $('.empty').show();
                    return false;
                }
                $('.numbers').show();
                let numbers = $('.numbers>table>tbody');
                let no = 1;
                $.each(e, function (index, item) {
                    let html = '<tr>' +
                        '<td>' + no + '</td>' +
                        '<td>+' + item.number + '</td>' +
                        '<td><span class="country" style="background: url(' + item.image + ')">' + item.country + '</span></td>' +
                        '<td><a href="/web/messages?number=' + item.number + '">view</></td>' +
                        '</tr>';
                    no += 1;
                    numbers.append(html);
                })
            })
        })
    </script>

{% endblock %}
